<script setup>
  import {useRouter} from "vue-router";
  import useCity from "@/stores/modules/city";
  import {storeToRefs} from "pinia";
  import {computed, ref} from "vue";
  import {getDiffDays} from "@/utils/formatDate";
  import useHome from "@/stores/modules/home";
  import useMain from "@/stores/modules/main";

  const router = useRouter()
  const cityStore = useCity()
  const homeStore = useHome()
  const mainStore = useMain()

  //位置/城市
  const cityClick = () => {
    router.push('/city')
  }
  const {myCity} = storeToRefs(cityStore)

  //获取当前位置
  const positionClick = () => {
    //获取当前位置
    navigator.geolocation.getCurrentPosition(res => {
      //拿到的结果是经纬度
      console.log('获取位置成功：', res)
    }, err => {
      console.log('获取位置失败：', err)
    })
  }

  //格式化时间
  const {startDate, endDate, startDateStr, endDateStr} = storeToRefs(mainStore)

  //天数
  const dayNum = computed(() => getDiffDays(startDate.value, endDate.value))
  //是否显示日历组件
  const show = ref(false);

  //选择时间
  const onConfirm = ([start, end]) => {
    mainStore.startDate = start
    mainStore.endDate = end

    show.value = false;
  };

  //自定义日期显示文字
  const formatter = day => {
    if (day.type === 'start') {
      day.bottomInfo = '入住';
    } else if (day.type === 'end') {
      day.bottomInfo = '离店';
    }
    return day
  }

  //首页热门城市展示
  const {hotCity} = storeToRefs(homeStore)

  //首页搜索
  const searchClick = () => {
    router.push({
      path: '/search',
      query: {
        startDate: startDateStr.value(),
        endDate: endDateStr.value(),
        myCity: myCity.value.cityName
      }
    })
  }

</script>

<template>
  <div class="homeSearchBox">
    <!--位置信息-->
    <div class="item location">
      <div class="city" @click="cityClick">{{ myCity.cityName }}</div>
      <div class="position" @click="positionClick">
        <span class="text">我的位置</span>
        <img src="@/assets/img/home/icon_location.png" alt="地址">
      </div>
    </div>

    <!--日期范围-->
    <div class="item dataRange" @click="show = true">
      <div class="start">
        <span class="title">入住</span>
        <span>{{ startDateStr() }}</span>
      </div>
      <div class="stay">共 {{ dayNum }} 晚</div>
      <div class="end">
        <span class="title">离店</span>
        <span>{{ endDateStr() }}</span>
      </div>
    </div>
    <!--日历-->
    <van-calendar v-model:show="show" type="range" @confirm="onConfirm"
                  :formatter="formatter"/>

    <!--价格和人数-->
    <div class="item moneyPeople" @click="">
      <span class="money">价格不限</span>
      <span class="people">人数不限</span>
    </div>

    <!--关键字-->
    <div class="item search">
      <span class="title">关键字/位置/名宿名</span>
    </div>

    <!--首页热门城市-->
    <div class="hotSuggests">
      <template v-for="(item,index) in hotCity" :key="index">
        <div class="hotCity"
             :style="{background: item.tagText.background.color, color:item.tagText.color}">
          {{ item.tagText.text }}
        </div>
      </template>
    </div>

    <!--开始搜索-->
    <div class="item homeSearch" @click="searchClick">
      <div class="button">开始搜索</div>
    </div>

  </div>
</template>

<style lang="less" scoped>
  .homeSearchBox {
    .item {
      height: 44px;
      display: flex;
      margin: 0 20px;
      align-items: center;
    }

    .location {

      .city {
        flex: 1;
        color: #333333;
      }

      .position {
        width: 74px;
        display: flex;
        align-items: center;

        .text {
          font-size: 12px;
          color: #666666;
        }

        img {
          position: relative;
          top: -1px;
          margin-left: 5px;
          width: 18px;
          height: 18px;
        }
      }
    }

    .dataRange {
      display: flex;
      justify-content: space-between;

      div {
        display: flex;
        flex-direction: column;
        font-size: 16px;

        .title {
          font-size: 12px;
          color: var(--auxiliary-text-color);
        }
      }

      .stay {
        font-size: 12px;
      }
    }

    .moneyPeople {
      justify-content: space-between;
      color: var(--auxiliary-text-color);
      line-height: 30px;

      .money {
        flex: 3;
        border-right: var(--auxiliary-gray-line);
      }

      .people {
        flex: 0.8;
        padding-left: 10px;
      }
    }

    .search {
      color: var(--auxiliary-text-color);
    }

    .hotSuggests {
      margin: 0 15px;
      display: flex;
      flex-wrap: wrap;

      .hotCity {
        margin: 5px;
        font-size: 12px;
        padding: 5px 10px;
        line-height: 1.2; //1.2em
        border-radius: var(--options-border-radius);
      }
    }

    .homeSearch {
      line-height: 38px;
      margin-top: 10px;

      .button {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 16px;
        background: var(--primary-color);
        border-radius: var(--options-border-radius);

        &:active {
          opacity: 0.9;
        }
      }
    }
  }
</style>